<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>homePage 信息管理</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
</head>
<body>
<div class="ui container">
    <!--搜索框-->
    <div class="attached" style="margin-top: 40px;!important;">
        <form th:action="@{/homePage}" method="post" style="display: inline-block !important;">
            <input type="text" name="name" placeholder="请输入用户名查找" style="height: 27px;width: 200px;">
            <input type="submit" value="搜索" class="ui button mini blue" style="font-size: 14px!important;width: 50px!important; height: 27px!important; border: none;margin-left: 5px;padding: 0;">
        </form>
        <a th:href="@{/update}" class="ui button mini teal" style="margin-left: 50px;">新增</a>
    </div>
    <!--内容-->
    <table class="ui celled attached table" style="margin-top: 10px;!important;">
        <thead>
        <tr>
            <th>序列号</th>
            <th>id</th>
            <th>姓名</th>
            <th>学号</th>
            <th>专业</th>
            <th>邮箱</th>
            <th>地址</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="user:${page.list}">
            <td th:text="${userStat.index+1}"></td> <!-- 每输出一行数据，序号+1 -->
            <td th:text="${user.id}"></td>
            <td th:text="${user.name}"></td>
            <td th:text="${user.sno}"></td>
            <td th:text="${user.major}"></td>
            <td th:text="${user.email}"></td>
            <td th:text="${user.address}"></td>
            <td>
                <a th:href="@{/edit/{id}(id=${user.id})}" class="ui button mini teal">编辑</a>
                <a th:href="@{/delete/{id}(id=${user.id})}" class="ui button mini red" onclick="javascript:return p_del()">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
    <!--分页按钮跳转-->
    <div class="ui attached segment">
        <table class="m-mobile-wide" width="425px">
            <tbody>
            <tr align="center">
                <td>
                    <a th:href="@{/homePage/(pageNum=${page.pageNum-1})}" class="ui button basic mini"
                       th:unless="${page.isFirstPage}">上一页</a>
                </td>
                <td>
                    第
                    <h8 th:text="${page.pageNum}">2</h8>
                    页/共
                    <h8 th:text="${page.pages}">4</h8>
                    页
                    共
                    <h8 th:text="${page.total}">29</h8>
                    条
                </td>
                <td>
                    <form name="pageForm" th:action="@{/homePage}" method="get">
                        <div class="ui mini input ">
                            <input type="text" class="m-bg" name="pageNum" placeholder="页码"
                                   style="width: 50px!important; height: 27.76px!important;" required>
                            <button type="submit"
                                    style="font-size: 14px!important;width: 50px!important; height: 27px!important; border: none;margin-left: 5px;padding: 0;"
                                    class="ui button mini green">
                                跳转
                            </button>
                        </div>
                    </form>
                </td>
                <td> &nbsp;</td>
                <td style="float: right">
                    <a th:href="@{/homePage/(pageNum=${page.pageNum+1})}" class="ui button basic mini " style="float: right;"
                       th:unless="${page.isLastPage}">下一页</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <!--提示信息-->
    <div class="ui success  message" th:unless="${#strings.isEmpty(message)}">
        <i class="close icon"></i>
        <div class="header">提示：</div>
        <p th:text="${message}"></p>
    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script>
    function p_del() {
        var msg = "确定要删除吗？";
        if (confirm(msg)==true){
            return true;
        }else{
            return false;
        }
    }
    $(".message .close").on('click',function () {
        $(this).closest(".message")
            .transition("fade");
    })
</script>
</body>
</html>